<template>
  <a-card class="general-card">
    <template #title>
      <div class="card-title">
        <span>最新通知</span>
        <icon-notification />
      </div>
    </template>
    <div class="notice-container">
      <div
        v-for="(item, idx) in list"
        :key="idx"
        class="notice-card"
        :class="getNoticeClass(item.type)"
      >
        <div class="notice-stripe" :class="getStripeClass(item.type)"></div>
        <div class="notice-content">
          <div class="notice-text">{{ item.content }}</div>
          <div class="notice-meta">
            <a-tag :style="getTagStyle(item.type)" size="small">
              {{ item.label }}
            </a-tag>
            <span class="notice-date">{{ item.date }}</span>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { IconNotification } from '@arco-design/web-vue/es/icon';

const list = [
  {
    type: 'urgent',
    label: '系统升级',
    content: '我们将于下周进行系统升级维护，支持更多编辑器功能和创意工具。',
    date: '2024-03-14'
  },
  {
    type: 'activity',
    label: '课程通知',
    content: '第 357 期线上课程将于本周日上午 10:30 开始，欢迎参加。',
    date: '2024-03-13'
  },
  {
    type: 'normal',
    label: '课程上线',
    content: '《数据库设计与实现指南》新方法探讨已上线，期待您的参与。',
    date: '2024-03-12'
  },
  {
    type: 'activity',
    label: '新功能',
    content: '题目评论功能已上线，欢迎体验反馈。',
    date: '2024-03-11'
  },
  {
    type: 'normal',
    label: '优化',
    content: '优化了代码编辑器的响应速度和稳定性。',
    date: '2024-03-10'
  },
  {
    type: 'urgent',
    label: '重要',
    content: '如有任何建议，请联系管理员：admin@example.com',
    date: '2024-03-09'
  }
];

const getNoticeClass = (type: string) => {
  return {
    'notice-urgent': type === 'urgent',
    'notice-activity': type === 'activity',
    'notice-normal': type === 'normal'
  };
};

const getStripeClass = (type: string) => {
  return {
    'stripe-urgent': type === 'urgent',
    'stripe-activity': type === 'activity',
    'stripe-normal': type === 'normal'
  };
};

const getTagStyle = (type: string) => {
  const styles = {
    urgent: {
      backgroundColor: 'rgba(255, 182, 193, 0.2)',
      color: '#ffa5b5',
      border: 'none'
    },
    activity: {
      backgroundColor: 'rgba(181, 220, 255, 0.2)',
      color: '#98c1e9',
      border: 'none'
    },
    normal: {
      backgroundColor: 'rgba(181, 230, 209, 0.2)',
      color: '#98d6be',
      border: 'none'
    }
  };
  return styles[type as keyof typeof styles];
};
</script>

<style scoped lang="less">
.general-card {
  border-radius: 16px;
  transition: all 0.3s ease;
  height: 350px;
  padding: 0;

  :deep(.arco-card-header) {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border-2);
  }

  :deep(.arco-card-body) {
    padding: 0;
    height: calc(100% - 53px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: 3px;
    }

    &:hover::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.1);
    }
  }

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 73, 255, 0.1);
  }
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-1);
  font-weight: 500;

  .icon-notification {
    font-size: 18px;
    color: #0049ff;
  }
}

.notice-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.notice-card {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  min-height: 76px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  &:active {
    transform: scale(0.98);
  }
}

.notice-stripe {
  width: 4px;
  background: #e8e8e8;

  &.stripe-urgent {
    background: linear-gradient(135deg, #ffd1d8 0%, #ffb5c0 100%);
  }

  &.stripe-activity {
    background: linear-gradient(135deg, #b5dcff 0%, #a3d1ff 100%);
  }

  &.stripe-normal {
    background: linear-gradient(135deg, #b5e6d1 0%, #a3e0c6 100%);
  }
}

.notice-content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.notice-text {
  color: #1d2129;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px;
}

.notice-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.notice-date {
  font-size: 12px;
  color: #86909c;
}
</style>
